<template>
	<view class="container">
		<view class="container">
			<view class="bind_card" v-if="merchantNumber">
				<view class="title">
					<image src="../../static/icon/bangka.png"></image>
					<text>扫描到商户信息</text>
				</view>
				<view class="card-item">
					<view>
						商户账户：{{merchantNumber}}
					</view>
					<view>
						商户名称：{{merchantName}}
					</view>					
				</view>							
				<view>
					<input type="number" placeholder="输入支付金额" class="amount" v-model="amount">
				</view>
			</view>			
			<button type="primary" @click="pay" v-if="merchantNumber">进入支付页面</button>
			<button type="primary" @click="scanQrcode()">扫描二维码</button>
		</view>		
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				customerNumber:'',
				merchantNumber:'',
				merchantName:'',
				amount:'',
				result:'',
				payLimit:''
			}
		},
		methods: {
			//扫描二维码
			scanQrcode(){
				uni.scanCode({				   
				    success: (res)=> {							
						this.result = res.result
						
						//解析json串
						let json = JSON.parse(res.result)
						
						//如果成功读取商户信息 
						if (json && json.merchantnumber) {
							this.merchantNumber = json.merchantnumber;
							this.merchantName = json.merchantname;
						} else {
							this.merchantNumber = '';
							this.merchantName = '';
						}
				    },
					fail:(err)=> {						
						this.merchantNumber = '';
						this.merchantName = '';
						
						uni.showToast({
							title:'未读取到有效数据',
							icon:'none'
						})
					}
				});
			},
			//进入支付详情页面
			pay(){
				//验证支付限额
				if (parseFloat(this.amount) > parseFloat(this.payLimit)) {
					uni.showToast({
						title:'当前支付超出支付限额，请先修改支付限额',
						icon:'none'
					})
					
					return
				}
				
				uni.navigateTo({
					url:'../pay_detail/pay_detail?merchantNumber=' + this.merchantNumber +
						'&amount=' + this.amount
				})			
			}
		},
		onLoad(options) {
			//获得账号
			this.accountNumber = options.accountNumber	
			//读取支付限额
			this.payLimit = uni.getStorageSync('payLimit')
		}
	}
</script>

<style>
	page {
		background: #EDEDED;
	}
	
	.container {
		padding: 15rpx;
	}
	
	.bind_card {
		padding: 30rpx;
		font-size: 30rpx;		
		background-color: #FFFFFF;
		border-radius: 25rpx;
		margin-bottom: 30rpx;
	}
	
	.bind_card .title {
		color: #333333;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;			
	}
	
	.bind_card .title image {
		width: 80rpx;
		height: 80rpx;
		float: left;
	}
	
	.bind_card .title text {
		float: left;
		padding-left: 40rpx;
	}
	
	.bind_card .card-item {
		color: #FFFFFF;
		background: #66CCFF;
		padding: 10rpx;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		line-height: 50rpx;
	}
	
	.amount {
		width: 600rpx;
		height: 150rpx;
		color: #333333;
		font-size: 48rpx;
		border-bottom: 1px solid #C0C0C0;
		margin-bottom: 50rpx;
	}
	
	button {
		margin-top: 20rpx;
	}
</style>